<template>
    <header>
        <!-- 汉堡菜单图标 -->
        <div class="hamburger" :class="{ 'close': isNavVisible }" @click="toggleNav">
        </div>
        <div class="logo">
            <a class="logo-a" href="//www.ohben.cn">
                <img class="logo-img" src="@/assets/svg/Hearthstone.svg" alt="">
            </a>
        </div>
        <!-- 顶部导航链接 -->
        <nav class="top-nav">
            <!-- 会重新刷新所有请求 -->
            <!-- <a href="#" v-for="item in navItems" :key="item">{{ item }}</a> -->
            <!-- 使用router-link 不会刷新页面 -->
            <router-link v-for="item in navData" :key="item.id" :to="item.path">
                {{ item.name }}
            </router-link>
            <a href="http://ohben.cn:6100/docs" target="_blank">接口文档</a>
            <a href="http://ohben.cn:6200/login?redirect=/dashboard/analysis" target="_blank">管理后台</a>
        </nav>
        <div class="login-btn" v-if="!isLoggedIn">
            <button class="sign-in-btn" @click="sign_in">登录</button>
            <button class="sign-up-btn" @click="sign_up">注册</button>
        </div>
        <div class="user-info" v-else>
            <span>{{ userInfo.name }}</span>
            <span>|</span>
            <button @click="logout">退出</button>
        </div>
        <div class="user-icon" @click="toggleUser"></div>
    </header>
    <!-- 定制的导航菜单，初始时不显示 -->
    <nav class="custom-nav" v-show="isNavVisible">
        <!-- 定制的导航链接 -->
        <a :href="item.path" v-for="item in navData" :key="item.id">{{ item.name }}</a>
        <a href="http://ohben.cn:6100/docs" target="_blank">接口文档</a>
        <a href="http://ohben.cn:6200/login?redirect=/dashboard/analysis" target="_blank">管理后台</a>
    </nav>
    <nav class="user-nav" v-show="isUserVisible" v-if="isLoggedIn">
        <a href="#">{{ userInfo.name }}</a>
        <a href="#">个人中心</a>
        <a href="#">消息通知</a>
        <a href="#">设置</a>
        <a href="#" @click="logout">退出</a>
    </nav>
    <nav class="user-nav" v-show="isUserVisible" v-else>
        <a href="/login" @click="sign_in">登录</a>
        <a href="/register" @click="sign_up">注册</a>
    </nav>
</template>

<script setup>
import { ref } from 'vue';
import navData from "@/data.json";
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import { computed } from 'vue';

const isNavVisible = ref(false);
const isUserVisible = ref(false);
const userStore = useUserStore();
const router = useRouter();

const toggleNav = () => {
    isNavVisible.value = !isNavVisible.value;
};

const toggleUser = () => {
    isUserVisible.value = !isUserVisible.value;
};
const sign_in = () => {
    console.log("登录...");
    router.push({ path: '/login' });
};

const sign_up = () => {
    console.log("注册...");
    router.push({ path: '/register' });
};

const logout = () => {
    userStore.logout();
};

const isLoggedIn = computed(() => userStore.isLoggedIn);
const userInfo = computed(() => userStore.userInfo);


</script>

<style scoped>
/* 所有header样式 */
header {
    height: 3rem;
    display: flex;
    /* 使用flex布局 */
    justify-content: space-between;
    /* 主轴两端对齐 */
    align-items: center;
    /* 交叉轴居中对齐 */
    padding: 0 16px;
    /* background-color: #333; */
    background-color: #000000;
    /* 背景颜色 */
    color: white;
    /* 文字颜色 */
}

/* 顶部导航栏的样式 */
.top-nav {
    display: flex;
    /* 使用flex布局 */
    gap: 20px;
    /* 子元素之间的间隔 */
}

/* 顶部导航链接样式 能应用于router-link标签*/
.top-nav a {
    color: white;
    /* 文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    padding: 5px 10px;
    /* 内边距 */
    transition: color 1.2s;
    /* 字体颜色变化的过渡效果 0.2秒快速响应 */
}

/* 鼠标悬停时的链接样式 */
.top-nav a:hover {
    /* color: goldenrod; */
    color: #007aff;
    background-color: #555;
    /* 鼠标悬停时的背景颜色 */
    transition: background-color 1.2s;
    /* 背景颜色变化的过渡效果 0.2秒快速响应 */
}

/* 定制的导航菜单样式 */
.custom-nav {
    position: fixed;
    /* 固定定位 相对于浏览器窗口 */
    top: 3rem;
    left: 0;
    width: 120px;
    /* 侧边栏宽度 */
    background-color: #333;
    padding: 10px;
    /* 内边距 */
    display: flex;
    /* 使用flex布局 */
    flex-direction: column;
    /* 子元素垂直排列 */
    gap: 10px;
    /* 子元素之间的间隔 */
    z-index: 999;
    /* 层级 */
}


.custom-nav a {
    height: 20px;
    color: white;
    /* 文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    padding: 5px 5px;
    /* 内边距 */
    display: flex;
    /*左居中对齐*/
    justify-content: flex-start;
    align-items: center;
    transition: color 1.2s;
    /* 字体颜色变化的过渡效果 0.2秒快速响应 */



}

.custom-nav a:hover {
    /* color: goldenrod; */
    color: #007aff;
    background-color: #555;
    /* 鼠标悬停时的背景颜色 */
    transition: background-color 1.2s;
    /* 背景颜色变化的过渡效果 0.2秒快速响应 */
}

.user-nav {
    position: fixed;
    /* 固定定位 相对于浏览器窗口 */
    top: 3rem;
    right: 0;
    width: 120px;
    /* 侧边栏宽度 */
    background-color: #333;
    padding: 10px;
    /* 内边距 */
    display: flex;
    /* 使用flex布局 */
    flex-direction: column;
    /* 子元素垂直排列 */
    gap: 10px;
    /* 子元素之间的间隔 */
    z-index: 999;
    /* 层级 */
}

.user-nav a {
    height: 20px;
    color: white;
    /* 文字颜色 */
    text-decoration: none;
    /* 去除下划线 */
    padding: 5px 5px;
    /* 内边距 */
    display: flex;
    /*左居中对齐*/
    justify-content: flex-start;
    align-items: center;
    transition: color 1.2s;
    /* 字体颜色变化的过渡效果 0.2秒快速响应 */

}

.user-nav a:hover {
    /* color: goldenrod; */
    color: #007aff;
    background-color: #555;
    /* 鼠标悬停时的背景颜色 */
    transition: background-color 1.2s;
    /* 背景颜色变化的过渡效果 0.2秒快速响应 */
}


/* 汉堡图标样式 */
.hamburger {
    display: none;
    /* 默认不显示图标 */
    cursor: pointer;
    /* 鼠标指针变成手 */
    transition: all 0.3s;
    width: 1rem;
    height: 1rem;
    background-image: url('@/assets/images/menu.png');
    background-size: 100%;
}

.hamburger.close {
    background-image: url('@/assets/images/close.png');
    background-size: 100%;
}


.logo {
    cursor: pointer;
    /* 鼠标指针变成手 */
    width: 32px;
    height: 32px;
}

.logo-img {
    width: 100%;
    height: 100%;
}

.sign-in-btn {
    /* 鼠标指针变成手 */
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 5px;

}

.sign-up-btn {
    /* 鼠标指针变成手 */
    cursor: pointer;
    padding: 2px 10px;
    border: 1px solid white;
    border-radius: 5px;

}

.user-info {
    display: flex;
    gap: 10px;
    align-items: center;
}

.user-icon {
    display: none;
    /* 默认不显示图标 */
    cursor: pointer;
    /* 鼠标指针变成手 */
    width: 1rem;
    height: 1rem;
    background-image: url('@/assets/images/user.png');
    background-size: 100%;
}

/* 响应式设计：当屏幕宽度小于767px时，调整布局 */
@media (max-width: 767px) {
    .top-nav {
        display: none;
        /* 隐藏导航链接 */
    }

    .login-btn {
        display: none;
        /* 隐藏登录按钮 */
    }

    .user-icon {
        display: block;
        /* 显示用户图标 */
    }

    .user-info {
        display: none;
    }

    .hamburger {
        display: block;
        /* 显示功能图标 */
    }
}

/* 媒体查询：当屏幕宽度大于767px时 */
@media (min-width: 768px) {
    .custom-nav {
        display: none;
        /* 隐藏定制菜单 */
    }

    .user-nav {
        display: none;
    }


}
</style>